<template>
  <!-- 如果当前是登录页，只显示 router-view -->
  <router-view v-if="route.path === '/login'" />
  
  <div class="allBox" v-else>
    <!-- 左侧菜单 -->
    <div class="allBox_left">
      <div class="allBox_left_top"
        style="display: flex; align-items: center; flex-flow: column; justify-content: center; color: #fff; border-bottom: 1px solid #333;">
        <span style="font-size: 24px; font-weight: 700;">荣科智能</span>
        <span style="font-size: 16px;">综合生产系统</span>
      </div>
      <div class="allBox_left_btm">
        <ul class="sidebar-menu">
          <li v-for="(item, index) in menuItems" :key="index" :class="{ active: isActive(item.to) }">
            <router-link :to="item.to" class="router-link">
              <font-awesome-icon :icon="item.icon" /> {{ item.text }}
            </router-link>
          </li>
        </ul>
      </div>
    </div>

    <!-- 右侧内容 -->
    <div class="allBox_right">
      <!-- 顶部标题栏 -->
      <div class="allBox_right_top"
        style="border-bottom: 1px solid #dee2e6; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 80px;">
        <!-- 动态标题 -->
        <h2 style="font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0;">{{ pageTitle }}</h2>

        <!-- 用户信息 -->
        <div style="display: flex; align-items: center;">
          <img style="height: 50px; margin-right: 10px;" src="./assets/user.png" alt="用户头像">
          <div style="font-size: 14px; display: flex; flex-flow: column;">
            <div>管理员</div>
            <small>最后登录: 今天 09:30</small>
            <div @click="logout" class="logout-link">登出</div>
          </div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="allBox_right_btm" style="overflow-y: auto; height: calc(100vh - 80px);">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 菜单数据（保持不变）
const menuItems = [
  { to: '/', icon: 'home', text: '仪表盘' },
  { to: '/production-plan', icon: 'project-diagram', text: '生产计划' },
  { to: '/inventory', icon: 'cubes', text: '库存管理' },
  { to: '/quality-inspection', icon: 'check-circle', text: '质检管理' },
  { to: '/equipment', icon: 'cogs', text: '设备管理' },
  { to: '/reports', icon: 'chart-bar', text: '报表分析' },
  { to: '/exceptions', icon: 'exclamation-triangle', text: '异常处理' }
]

// 路由名称 → 中文标题映射
const routeTitleMap = {
  Home: '仪表盘',
  ProductionPlan: '生产计划',
  Inventory: '库存管理',
  QualityInspection: '质检管理',
  Equipment: '设备管理',
  Reports: '报表分析',
  Exceptions: '异常处理'
}

// 动态计算当前页面标题
const pageTitle = computed(() => {
  return routeTitleMap[route.name] || '未知页面'
})

// 判断菜单是否激活
const isActive = (path) => {
  return route.path === path
}

// 登出
const logout = () => {
  localStorage.removeItem('isLoggedIn')
  router.push({ name: 'Login' })
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.allBox {
  display: flex;
  width: 100%;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 左侧 */
.allBox_left {
  width: 250px;
  height: 100%;
  background: #1a1a1a;
  display: flex;
  flex-direction: column;
}

.allBox_left_top {
  height: 80px;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.allBox_left_btm {
  flex: 1;
  overflow-y: auto;
}

/* 右侧 */
.allBox_right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f8f9fa;
}

.allBox_right_top {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #fff;
  border-bottom: 1px solid #dee2e6;
}

.allBox_right_btm {
  flex: 1;
  overflow-y: auto;
}

/* 菜单样式 */
.sidebar-menu {
  list-style: none;
  padding: 0.5rem 0;
}

.sidebar-menu li {
  margin: 0;
}

.sidebar-menu li a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s;
  border-left: 3px solid transparent;
}

.sidebar-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-menu li.active a {
  background-color: #2c80ff;
  border-left-color: #fff;
}

.sidebar-menu svg {
  margin-right: 0.75rem;
  width: 20px;
  text-align: center;
}

/* 登出链接 */
.logout-link {
  cursor: pointer;
  color: #2c80ff;
  font-weight: 500;
  font-size: 14px;
  margin-top: 2px;
}

.logout-link:hover {
  text-decoration: underline;
}
</style>